<template>
    <div class="select-activity">
        <div class="row-image activity-header" >
            <a href="#" class="item">
                <img :src="activityHeader" alt="">
            </a>
        </div>
   
        <div class="activity-main" >
            <div class="row-image activity-image">
                <a href="#" class="item">
                    <img :src="selectActivitys.imageUrl" alt="">
                </a>
            </div>
    
            <div class="activity-box" >

                    <ul>
                        <li v-for="selectActivity in selectActivitys.itemList" :key="selectActivity.id" >
                            <a hef="#">
                                <img :src="selectActivity.imgUrl" alt="">
                            </a>
                            <div>
                                <p class="txt">{{selectActivity.name}}</p>
                                <p class="txt">{{selectActivity.introduce}}</p>
                            </div>
                        </li>             
                    </ul>
            </div>
        </div>



    </div>
</template>
<script>
    import {mapActions,mapGetters,mapMutations,mapState} from "vuex"
    export default {
        computed: {
            ...mapGetters("SelectActivity",[
                "activityHeader",
                // "selectActivitys",
            ]),

            
            ...mapState("SelectActivity",[
                 "selectActivitys",
            ])
        },
        
    }
</script>

<style lang="stylus" scoped>
.select-activity
    .activity-box
        margin-top -.3302rem
        // overflow scroll
        
        ul
            display flex
            width 10.0966rem
            justify-content flex-start

            li
                width 1.0605rem
                margin .1005rem 0 .15008rem 
                border 1px solid #ececec
                border-left 0px
                box-shadow 0 .01rem .030016rem 0 #f2f2f2
                background #fff
                &:nth-of-type(1){
                    margin-left .15008rem
                    border-left-width 1px
                }
                a
                    display block
                    width 100%
                    img   
                        width 100%
                        height 1.0605rem

                div
                    border-top 1px solid #ececec
                    width 1.0605rem
                    text-align left
                    padding .04002rem 0 .09005rem .07003rem
                    line-height 1.4
                    color #666
                    white-space nowrap 
                    text-overflow ellipsis
                    overflow hidden
                    p
                        &:nth-of-type(1)    
                            color #333
                            font-size .120064rem
                            overflow hidden
                            text-overflow ellipsis 
                            white-space nowrap
                        &:nth-of-type(2)    
                            font-size .1000rem




</style>